<template>
  <div class="nav">
    <span
      v-for="(item, index) in nav"
      :class="{active: index == currentIndex}"
      @click="navClick(index)"
    >{{item}}</span>
  </div>
</template>

<script>
export default {
  name: 'StudentNav',
  data() {
    return {
      nav: ['课程'],
      currentIndex: 0,
    };
  },
  methods: {
    navClick(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped>
.nav {
  width: 300px;
  display: flex;
}
.nav span {
  margin: 0 20px;
  color: #4c4c4c;
  text-align: center;
  font-size: 18px;
}
.nav span.active {
  color: #3a8bff;
  border-bottom: 1px solid #3a8bff;
  padding-bottom: 4px;
}
</style>